@import "../../../stylesheet/mixin.scss";
@import "../../../stylesheet/default.scss";

$prefix: m-socket;

.#{$prefix}-container-fillet{
	border-radius: $socket-fillet;
}

.#{$prefix}-container {
  min-width: 50px;
  position: relative;
	overflow: hidden;
  margin: 0 $marginTiny;
  @include box($socket-width, $socket-height);
  user-select: none;
  background: $socket-container-background;
	&:hover	{
		outline: 1px dotted #bbbbbb;
	}

  .#{$prefix}-content {
    @include box($socket-width/2 + 4px, $socket-height);
    display: inline-block;
		text-align: center;
		position: absolute;
    span {
			font-size: 13px;
			line-height: $socket-height;
			color: #838383;
		}
	}

	.#{$prefix}-content-close{
		right: 0px;
	}

	.#{$prefix}-button{
		@include transition(transform 260ms linear);
		@include box(22px, 22px);
		position: absolute;
		display: inline-block;
		@include flex_average;
		will-change: transform;
		left: 0;
	}

	.#{$prefix}-button-fillet {
		border-radius: $socket-fillet;
	}

  .#{$prefix}-button-open {
		transform: translateX(28px);
	}

  .#{$prefix}-button-close {
		transform: translateX(0px);
  }
}

